<template>
  <div class="orderDetail">
    <iu-header>
      <template #left>
        <x-icon
          @click="spotCheckView"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
      </template>
      <template #title>
        证书详情
      </template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <tab
      class="newpage_tab"
      style="z-index:0"
      active-color="#456de6"
      default-color="#fff"
      custom-bar-width="80%"
    >
      <tab-item @on-item-click="handler(1)" :selected="statusIndex == 1">
        基本信息
      </tab-item>
      <tab-item @on-item-click="handler(2)" :selected="statusIndex == 2">
        工单进度
      </tab-item>
    </tab>
    <div
      class="expored-tip"
      :class="{
        warning: detail.willExpiredDays < 30 && detail.status != 2
      }"
    >
      <x-icon type="ios-information-outline" size="16" fill="#fff"></x-icon>
      <span style="margin-left:6px">
        {{ detail.willExpiredDays | willExpiredDays(detail.status) }}
      </span>
    </div>
    <div class="cate-nfo" v-if="statusIndex == 1">
      <div class="info-list">
        <div class="info-list-item">
          <div class="info-title">证书名称：</div>
          <div class="info-value">
            {{ detail.name || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">证书类型：</div>
          <div class="info-value">
            {{ typeData[detail.type] || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">证书批号：</div>
          <div class="info-value">
            {{ detail.batchNo || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">证书编号：</div>
          <div class="info-value">
            {{ detail.serialNumber || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">发证时间：</div>
          <div class="info-value">
            {{ detail.releaseDate || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">有效期限：</div>
          <div class="info-value">
            {{ detail.effectiveDate }} ~ {{ detail.expirationDate }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">所属部门：</div>
          <div class="info-value">
            {{ detail.departmentName || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">负 责 人：</div>
          <div class="info-value" v-if="detail.certificateKeeperRes">
            {{
              detail.certificateKeeperRes.map(e => e.principalName).join(" , ")
            }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">档 案 人：</div>
          <div class="info-value" v-if="detail.certificateKeeperRes">
            {{ detail.certificateKeeperRes.map(e => e.keeperName).join(" , ") }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">经 办 人：</div>
          <div class="info-value" v-if="detail.certificateKeeperRes">
            {{
              detail.certificateKeeperRes.map(e => e.operatorName).join(" , ")
            }}
          </div>
        </div>
        <!-- <div class="info-list-item">
          <div class="info-title">存档位置：</div>
          <div class="info-value">
            {{ detail.archiveLocation || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">发证机关：</div>
          <div class="info-value">
            {{ detail.issuingOrg || "" }}
          </div>
        </div> -->
        <div class="info-list-item">
          <div class="info-title">备注：</div>
          <div class="info-value">
            {{ detail.remark }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">附件：</div>
          <div class="info-value">
            <template v-if="detail.attachments && detail.attachments.length">
              <template v-for="(item, index) in detail.attachments">
                <x-img
                  v-if="/\.(png|jpg|gif|jpeg|webp|bmp)$/.test(item.name)"
                  :src="item.url"
                  :key="item.id"
                  @click.native="showImage(index)"
                ></x-img>
                <div class="file" v-else :key="item.id">
                  <a :href="item.url" :download="item.name" target="_blank">
                    {{ item.name }}
                  </a>
                </div>
              </template>
            </template>
            <template v-else>
              无
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="cate-nfo" v-else>
      <template v-if="detail.workSheet">
        <iu-card
          class="sheet-card"
          v-for="(item, index) in [detail.workSheet]"
          :key="index"
          @click.native="workSheetDetail(item.id)"
        >
          <template #title>
            <div class="sheet-card-title">
              {{ item.sn }}
            </div>
          </template>
          <template #tip>
            <div class="sheet-card-tip" :class="'status' + item.status">
              <span>
                {{ statusText[+item.status] }}
              </span>
            </div>
          </template>
          <template #body>
            <div class="sheet-card-info">
              <span> {{ sheetTypeText[item.type] }}工单 </span>
              <span class="sheet-card-tag" :class="'priority' + item.priority">
                {{ sheetPriorityText[item.priority] }}
              </span>
            </div>
            <div class="sheet-card-body">
              描&nbsp;&nbsp;述：{{ item.description }}
            </div>
            <div class="sheet-card-bottom">
              <span>
                {{ item.operatorName }}
              </span>
              <span>
                {{ item.createTime | formatDate }}
              </span>
            </div>
          </template>
        </iu-card>
      </template>
    </div>
    <showImg
      :list="fileList"
      :index="showImgIndex"
      :show.sync="showImg"
    ></showImg>
  </div>
</template>

<script>
import {
  Flexbox,
  FlexboxItem,
  XDialog,
  XImg,
  Tab,
  TabItem,
  TransferDomDirective as TransferDom
} from "vux";
import SafetyManageDao from "@/daos/safety_manage_dao";
import iuHeader from "@/components/common/header/index";
import iuCard from "@/components/common/card/index";
import showImg from "@/components/common/showImg/showImg";

export default {
  directives: {
    TransferDom
  },
  inject: ["backToHomepage"],
  components: {
    Flexbox,
    XImg,
    Tab,
    TabItem,
    FlexboxItem,
    XDialog,
    iuHeader,
    iuCard,
    showImg
  },
  data() {
    return {
      buttonShow: false,
      detail: {},
      imgUrl: "",
      fileList: [],
      typeData: ["安全类证书", "资质证书", "许可证书", "环保证书"],
      statusText: [
        "",
        "疑似重复",
        "",
        "",
        "",
        "未处理",
        "",
        "推迟处理",
        "",
        "已解决",
        "",
        "已关闭"
      ],
      sheetTypeText: ["", "点巡检", "更换", "提醒", "维修", "预警"],
      sheetPriorityText: ["", "一般", "重要", "紧急"],
      workSheetList: [],
      showImg: false,
      showImgIndex: 0,
      status: 0,
      statusIndex: 1
    };
  },
  filters: {
    willExpiredDays(val, status) {
      if (status == 2) {
        return "已失效";
      } else if (val === 0) {
        return "今天到期";
      } else {
        return val > 0 ? `${val}天后到期` : `已过期${-val}天`;
      }
    }
  },
  activated() {
    this.id = this.$route.query.id || 0;
    this.getCertificateDetail(this.id);
  },

  methods: {
    spotCheckView() {
      history.back(-1);
    },
    handler(e) {
      this.pageNum = 1;
      this.pageSize = 10;
      this.statusIndex = e;
    },
    getCertificateDetail(id) {
      SafetyManageDao.getCertificateDetail({ id }, res => {
        if (res) {
          this.detail = res;
        }
      });
    },
    workSheetDetail(id) {
      this.$router.push({
        name: "workOrderDetails",
        query: {
          id
        }
      });
    },
    showImage(index) {
      this.fileList.splice(0);
      this.fileList = this.detail.attachments.map(e => e.url);
      this.showImgIndex = index;
      this.showImg = true;
    }
  }
};
</script>

<style lang="less" scoped>
.orderDetail {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  min-height: 100vh;
  background-color: #18182c;
  .expored-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 4px 0;
    font-size: 14px;
    text-align: center;
    &.warning {
      color: #ff2c2c;
    }
  }
}
.cate-nfo {
  height: auto;
  margin-bottom: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  .info-list {
    padding: 8px 16px;
    background: #22233f;
    > div {
      margin: 8px 0;
    }
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
    }
    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      // margin-right: 30px;
      width: 100px;
      text-align: right;
    }

    .info-value {
      flex: 1;
      font-size: 16px;
      color: #fff;
      .file {
        margin-bottom: 4px;
      }
      a {
        color: #fff;
      }
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }
    }
    .warning {
      color: #ff2c2c;
    }
  }
}

.sheet-card {
  margin: 8px;
  .sheet-card-title {
    color: #fff;
    &.warning {
      color: #ffb62c;
    }
    &.error {
      color: #ff2c2c;
    }
  }
  .sheet-card-tip {
    display: flex;
    justify-content: flex-end;
    margin-right: -8px;
    span {
      padding: 2px 6px 4px;
      text-align: right;
      background-color: #292a4d;
      border-radius: 5px;
    }
    &.status1 {
      color: #f56c6c;
    }
    &.status3 {
      color: #409eff;
    }
    &.status5 {
      color: #409eff;
    }
    &.status9 {
      color: #dd9710;
    }
  }
  .sheet-card-info {
    display: flex;
    align-items: center;
    margin: 4px 0 12px;
    .sheet-card-tag {
      margin-left: 12px;
      border: 1px solid #456de6;
      padding: 0 4px 1px;
      font-size: 12px;
      border-radius: 4px;
      color: #456de6;
      &.priority2 {
        color: #d98806;
        border-color: #d98806;
      }
      &.priority3 {
        color: #f66;
        border-color: #f66;
      }
    }
  }
  .sheet-card-body {
    margin: 4px 0 12px;
  }
  .sheet-card-department {
    margin: 8px 0;
    color: rgba(255, 255, 255, 0.8);
  }
  .sheet-card-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.6);
  }
}
</style>
<style lang="less">
.newpage_tab {
  .vux-tab {
    height: 45px !important;
    background: #1b1c32;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }
}
</style>
